{% set thumb_size = config["THUMB_SIZE"][0] %}

{% block css %}
    <style type="text/css">

.album_view .post-thumbnails {
    padding: 0;
    margin: 16px auto 16px auto;
}

.album_view .tags {
    top: auto;
    bottom: -12px;
}

.container-list .photo_cmdbar {
    display: block;
    float: none;
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color: #333;
    padding: 0 5px;
    border-radius: 2px;
}

.photo_cmdbar a {
    color: #fff;
    text-decoration: none;
}

.post-thumbnails .thumbnail {
    width: {{ thumb_size//2-10 }}px;
    margin: 5px;
    padding: 2px;
    float: left;
    display: block;
    border: 3px #ccc solid;
    text-align: center;
}
.post-thumbnails > .thumbnail:nth-child({{ thumb_size//100 }}n+1) {
    width: {{ thumb_size }}px;
    margin: 6px 5px;
}

</style>

<!-[if lt IE 9]>
<style type="text/css">
.post-thumbnails > .thumbnail:first-child {
width: {{ thumb_size }}px;
margin: 6px 5px;
}
</style>
<![endif]->
<style type="text/css">
@media (max-width: 480px) {
    .post-thumbnails .thumbnail {
        width: 200px;
        margin: 0;
    }
    .post-thumbnails > .thumbnail:nth-child({{ thumb_size//100 }}n+1) {
        width: 200px;
        margin: 0;
    }
    .post-thumbnails > .thumbnail:first-child {
        width: 200px;
        margin: 0;
    }
}
</style>
{% endblock %}


{% block script %}
    {% include "__post_script.html" %}
<script type="text/javascript" src="{{ settings.MirrorSite }}/static/assets/jquery/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var $albums_holder = $("#albums-holder");
    var $slider_bar = $(".slider-bar");
    var resize_album_holder = function(){
        if ($slider_bar.css("position") === "fixed"){
            $albums_holder.height($slider_bar.height()+40);
            $albums_holder.outerWidth($slider_bar.outerWidth()+20);
        } else {
            $albums_holder.height(0);
        }
    };
    resize_album_holder();

    var $album_view = $(".album_view");
    $(window).resize(function() {
        resize_album_holder();
        bind_images($album_view);
    });

    var masonry = function($container, callback){
        $container.imagesLoaded(function(){
            $container.masonry({
                // options
                itemSelector : '.thumbnail',
                isFitWidth : true,
                isAnimated: true,
                isResizable: true,
                columnWidth: {{ thumb_size//2 + 10 }}
            });
            bind_images($album_view.find(".post-thumbnails"));

            bind_img_box($album_view.find(".post-thumbnails"), "album", ".post-thumbnails", -1, -1);
        });
    };

    var bind_images =function($container){
        bind_img_info($container, 150, 120);
        $(".img_info").each(function(index, item){
            var $info = $(item);
            if ($info.width() < 320){
                $info.hide();
                $info.parent().hover(function(){
                    $info.show();
                }, function(){
                    $info.hide();
                });
            }
        });
    };

    var insert_thumb = function($container, photo){
        var $th = $('<li class="thumbnail">' +
                '<img src="{0}" real_src="{1}" alt="{2}" photo_id="{3}">'.format(photo.url_thumb||photo.url,
                        photo.url, photo.alt, photo.id) +
                '</li>');
        var $cmdbar = $cmdbar_template.clone().hide();

        $cmdbar.find(".stats").attr("target_id", photo.id);
        $cmdbar.find(".stats[name=like_count]>i").after(photo.stats.like_count);
        $cmdbar.find(".stats[name=unlike_count]>i").after(photo.stats.unlike_count);
        $th.append($cmdbar);

        $(".photo_cmdbar .stats", $th).click(function(){
            var $this = $(this);
            var $icon = $this.find("i").clone();
            $.json_action("stats",{
                stats_type: $.toJSON($this.attr("stats_type")),
                id: $.toJSON($this.attr("target_id")),
                oper: $.toJSON($this.attr("oper")),
                name: $.toJSON($this.attr("name"))
            },function(resp){
                $this.empty();
                $this.append($icon);
                $this.append(resp.stats[$this.attr("name")]);
                photo.stats = resp.stats;
            },function(err){
                bootbox.alert(err);
            });
            $this.unbind("click");
        });

        $th.hover(function(){
            $cmdbar.show();
        }, function(){
            $cmdbar.hide();
        });

        $container.append($th);
    };

    // get hot photos
    var $cmdbar_template = $("#cmdbar_template");
    $.json_action("photos/hot",{'count': 6},function(resp){
        $.each(resp.photos, function(index, photo){
            insert_thumb($album_view.find(".post-thumbnails"), photo);
        });

        masonry($album_view.find(".post-thumbnails"));

    },function(err){
        bootbox.alert(err);
    });

    var $albums_menu = $(".list-menu");

    var get_album_menu = function(post){
        var $menu = $("#album_"+post.id);
        if ($menu.length <= 0){
            $menu = $("#album_menu_template").clone();
            $menu.attr("id", "album_{0}".format(post.id));
            $albums_menu.append($menu);
        }
        return $menu;
    };
    var show_album_menu = function(post, scrollto){
        post.post_date = post.post_date.to_date();
        post.updated_date = post.updated_date.to_date();

        var $menu = get_album_menu(post);

        if (post.public) {
            $menu.removeClass("text-muted");
            $(".post-hide", $menu).text("").hide();
        } else {
            $menu.addClass("text-muted");
            $(".post-hide", $menu).text("{{ _("Hidden") }}").show();
        }

        if(post.sticky) {
            $(".post-sticky", $menu).show();
        } else {
            $(".post-sticky", $menu).hide();
        }

        $(".name", $menu).text(post.title);
        $(".badge", $menu).text(post.photos.length);
        $(".post-date", $menu).text(post.post_date.format("yyyy-MM-dd"));

        $menu.unbind("click");
        $menu.click(function(){
            $albums_menu.find("li").removeClass("active");
            $menu.addClass("active");
            show_album(post);
        });

        $menu.show();

        resize_album_holder();

        return $menu;
    };
    var show_album = function(post){
        var $post = $("#album_template").clone();

        $post = build_post_panel($post, post);
        $album_view.html($post);
        $post.show();

        {% if user.is_admin() %}
        $(".menu-edit", $post).unbind("click").click(menu_edit);

        var album_delete = function(e){
            var $post = $(this).parents(".post");
            menu_delete(e, $post, function(resp){
                var $menu = get_album_menu(post);
                $menu.remove();
            });
        };
        $(".menu-delete", $post).unbind("click").click(album_delete);
        {% endif %}

        $.each(post.photos, function(index, photo){
            insert_thumb($post.find(".post-thumbnails"), photo);
        });
        masonry($album_view.find(".post-thumbnails"));
    };

    $(".load-more-post").click(function() {
        load_posts(show_album_menu);
    });

    load_posts(show_album_menu);

    var active_menu = function($menu){
        if ($menu && $menu.length > 0){
            $menu.trigger('click');
        }
    };

    bind_shortcuts($albums_menu, active_menu, show_album_menu);

    {% if user.is_admin() %}
        var post_callback = function(post_data){
            editor.hide();
            show_album_menu(post_data, true).trigger("click");
        };
        editor = new Editor(md_converter, post_callback, true);
        var $new_album = $("#new-post");
        $new_album.html('<i class="fa fa-photo"></i> {{ _("New Album") }}');
        $new_album.click(function(){
            editor.new_post(null, true);
        });
    {% endif %}
});
</script>
{% endblock %}

{% block body %}
{% if user.is_admin() %}
    {% include "_editor.html" %}
{% endif %}
<div class="row">
    <div class="col-lg-3 slider-bar well">
        <h4><i class="fa fa-picture-o"></i> {{ _("Albums") }}</h4>
        <li class="dis-none" id="album_menu_template">
            <a href="javascript:">
                <span class="post-sticky dis-none" title="{{ _("Sticky") }}"></span>
                <span class="label label-default post-hide dis-none"></span>
                <span class="name">template</span>
                <span class="badge">0</span>
                <br><i class="fa fa-clock-o text-muted"></i> <span class="post-date text-muted"></span>
            </a>
        </li>
        <ul class="nav nav-pills nav-stacked list-menu">
        </ul>
        <p class="text-center">
            <button class="load-more-post btn btn-block btn-info dis-none">{{ _("More") }}...</button>
            <img class="post-loading loading" src="{{ settings.MirrorSite }}/static/images/posts_loading.gif" alt="{{ _("loading") }}..."/>
        </p>
    </div>
    <div class="col-lg-3" id="albums-holder">
    </div>
    <div class="col-lg-7 album_view container-list">
        <div class="panel panel-default">
            <div class="panel-heading">
                {{ _("Hot Photos") }}
            </div>
            <ul class="post-thumbnails"></ul>
        </div>
    </div>
</div>
<!-- Start Post Template -->
<div id="album_template" class="post dis-none active panel panel-default" >
    <input type="hidden" class="date_val" />
    <div class="panel-heading">
        <div class="tags"></div>
        <small>
        <i class="fa fa-clock-o"></i> <span class="post-date"></span>
        <span class="cmdbar pull-right">
            <i class="fa fa-user"></i> <span class="post-author"></span>&nbsp;
            <button class="share btn btn-default btn-xs" title="{{ _("Share") }}">
                <i class="fa fa-share"></i></button>
            <button class="stats btn btn-default btn-xs" stats_type="Post" name="like_count" oper="increase"
                title="{{ _("Like") }}"><i class="fa fa-thumbs-o-up"></i>
            </button>
            <button class="stats btn btn-default btn-xs" stats_type="Post" name="unlike_count" oper="increase"
                title="{{ _("Unlike") }}"><i class="fa fa-thumbs-o-down"></i>
            </button>
            <button class="comment btn btn-default btn-xs" title="{{ _("Comment") }}">
                <i class="fa fa-comment-o"></i></button>
            &nbsp;
            {% if user.is_admin() %}
            <div class="menu btn-group">
                <a class="dropdown-toggle" data-toggle="dropdown" href="">
                    <i class="fa fa-toggle-down text-default"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="menu-edit" href="javascript:;">{{ _("Edit") }}</a></li>
                    <li><a class="menu-delete" href="javascript:;">{{ _("Delete") }}</a></li>
                </ul>
            </div>
            {% endif %}
        </span>
        </small>
        <div class="comments_panel dis-none"></div>
    </div>
    <ul class="post-thumbnails"></ul>
</div>
<!-- End Album Template -->
<div id="cmdbar_template" class="photo_cmdbar dis-none">
    &nbsp;<a class="stats" stats_type="Photo" target_id="" name="like_count" oper="increase"
       href="javascript:;" title="{{ _("Like") }}"><i class="fa fa-thumbs-up"></i>
    </a>&nbsp;
    <a class="stats" stats_type="Photo" target_id="" name="unlike_count" oper="increase"
       href="javascript:;" title="{{ _("Unlike") }}"><i class="fa fa-thumbs-down"></i>
    </a>&nbsp;
</div>
{% include "__comment.html" %}
{% endblock %}
